<template>
  <div class="content-box">
    <el-row>
      <el-col :span="12">
        <heading style="margin-top:0;" :grade="'1'">校区管理</heading>
      </el-col>
      <el-col :span="12" style="text-align:right;">
        <el-button class="orange-btn" @click="handleAdd()"> 新增校区</el-button>
      </el-col>
    </el-row>
    

    <div v-if="schoolList.list && schoolList.list.length">        
      <!--<el-button class="fr" type="primary">导出课程表(单个)</el-button>-->
      <el-table
        class="campus-table"
        :data="schoolList.list"
        tooltip-effect="dark"
        style="width: 100%">
        <el-table-column
          label="校区名称"
          width="178"
          show-overflow-tooltip>
          <template scope="scope">{{ scope.row.schoolName }}</template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="详细地址"
          width="195"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="listTrainVenuesAddress"
          label="上课地点"
          width="190">
          <template scope="scope">
            <div v-for="item in scope.row.listTrainVenuesAddress" :key="item">
              {{item.address}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="transitInfo"
          label="交通信息"
          width="200"
          show-overflow-tooltip>
          <template scope="scope">
            <p class="hidden">公交：{{ scope.row.transitInfo }}</p>
            <p class="hidden">地铁：{{ scope.row.metroInfo }}</p>
            <p class="hidden">停车：{{ scope.row.parkInfo  }}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="70"
          class="center">
          <template scope="scope" >
            <el-button size="small" @click="handleEdit(scope.row)" type="link">编辑</el-button>
            <el-button style="margin-left: 0;" size="small" @click="handleDelete(scope.row)" type="link">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-bind="getPaginationProps(schoolList)"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>
 
    <Placeholder v-else 
      :src="'/static/images/no-school.jpg'" 
      :text="'点击“新增校区”来设置校区吧，设置完成即可发布课程。'">
    </Placeholder>
 

    <XDialog 
      v-if="dVisible"
      :visible="dVisible"
      :width="500"
      :cancelText="'取消'"
      :sureText="'保存'"
      :title="'校区信息'"
      v-on:cancel="hideDialog"
      v-on:confirm="handleSave"
      v-on:close="hideDialog">          
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-scrollbar  wrap-class="form-wrapper"> 
          <el-form-item 
            prop="schoolName"
            label="校   区："
            :rules="[
                { required: true, message: '请输入校区名称'},
            ]">
            <el-input class="fl add-input" v-model.trim="form.schoolName" :maxlength="50"  placeholder="请输入校区名称"></el-input>
          </el-form-item>
          <el-form-item 
            prop="address"
            label="详细地址：">
              <el-input class="fl add-input" v-model.trim="form.address"  placeholder="请输入详细地址"></el-input>
          </el-form-item>
          <el-form-item 
            prop="listTrainVenuesAddress"
            label="上课地点："
            :rules="[
                { required: true, message: '请输入上课地点'},
                Object.assign({}, validator.rule.venuesAddress,{message: '上课地点不能为空'})
            ]">
            <div v-for="(item,index) in form.listTrainVenuesAddress" :key="item" class="address-item" v-show="item.status == 1">              
              <el-input  placeholder="请输入该校区的上课场地、场馆或教室名称"  v-model.trim="item.address" :disabled="item.readonly" class="address-input">
              </el-input>
              <template v-if="!item.readonly">
                <el-button icon="plus" class="btn-icon" v-if=" index == form.listTrainVenuesAddress.length -1"
                  @click="handlePlusAddress()" :disabled="index == maxAddressLength - 1"></el-button>
                <el-button icon="minus" class="btn-icon" v-else
                  @click="handleMinusAddress(index)" ></el-button>
              </template>              
              
            </div>
          </el-form-item>
          <el-form-item 
            prop="transitInfo"
            label="交通信息：">
            <el-row class="mb20">
              <el-col :span="4">
                <el-button size="small">地铁</el-button>
              </el-col>
              <el-col :span="16">
                <el-input v-model.trim="form.metroInfo"></el-input>
              </el-col>
            </el-row>
            <el-row class="mb20">
              <el-col :span="4">
                <el-button size="small">公交</el-button>
              </el-col>
              <el-col :span="16">
                <el-input v-model.trim="form.transitInfo"></el-input>
              </el-col>
            </el-row>
            <el-row class="mb20">
              <el-col :span="4">
                <el-button size="small">停车</el-button>
              </el-col>
              <el-col :span="16">
                <el-input v-model.trim="form.parkInfo"></el-input>
              </el-col>
            </el-row>     
            <p class="small center" style="width:300px;">完善校区信息，有助于买家更了解学校信息哦！</p>     
          </el-form-item>
          </el-scrollbar>
        </el-form>      
    </XDialog>

  </div>
</template>
<script>
import { pagingList } from 'utils/mixins'
import XDialog from '../../components/Dialog.vue'
import Api from 'api/train'
import validator from 'utils/validator'
export default {
  mixins: [pagingList],
  components: {
    XDialog
  },
  computed: {
  },
  data () {
    return {
      validator,
      query: this.getQuery(),
      dVisible: false,
      selectedList: [],
      schoolList: {},
      school: {},
      rules: {},
      oldName: '',
      maxAddressLength: 10,
      form: {
        schoolName: '',
        address: '', // 详细地址
        metroInfo: '',
        transitInfo: '',
        parkInfo: '',
        longitude: 0,
        latitude: 0,
        status: 1,
        orgUserId: '',
        createdTime: new Date().getTime(),
        id: '',
        listTrainVenuesAddress: [{
          id: '',
          schoolId: '',
          address: '',
          status: 1
        }], // 上课地点
        modifyId: ''
      }
    }
  },
  methods: {
    fetch () {
      Api.schoolList(this.query).then((res) => {
        this.schoolList = res.data
      })
    },
    hideDialog (item) {
      if (this.form.id && !this.form.schoolName) {
        this.fetch()
      }
      this.dVisible = false
    },
    handleDelete (item) {
      Api.removeValid({schoolId: item.id}).then((res) => {
        if (res.data === true) {
          this.$confirm('删除后不可恢复，确认删除该校区吗？', '提示', {
            type: 'warning'
          }).then(() => {
            Api.deleteSchool({schoolId: item.id}).then((res) => {
              this.fetch()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            })
          })
        } else {
          let msg = '该校区还有课程未上完，不能删除！' // eslint-disable-line
          this.$alert(res.msg, '提示', {
            confirmButtonText: '我知道了',
            callback: action => {
              /*
              this.$message({
                type: 'info',
                message: `action: ${ action }`
              })
              */
            }
          })
        }
        console.log(res)
      })
    },
    handleEdit (item) {
      let readOnlyList = []
      let addressList = item.listTrainVenuesAddress
      Api.editValidate({schoolId: item.id}).then((res) => {
        readOnlyList = res.data
        this.dVisible = true
        this.oldName = item.schoolName
        this.form = item
        for (let i = 0, len = readOnlyList.length; i < len; i++) {
          for (let j = 0, jlen = addressList.length; j < jlen; j++) {
            if (readOnlyList[i] === addressList[j].id) {
              addressList[j].readonly = true
            }
          }
        }
        if (!this.form.listTrainVenuesAddress.length) {
          this.form.listTrainVenuesAddress = []
          this.form.listTrainVenuesAddress.push({
            id: '',
            schoolId: item.id,
            address: '',
            status: 1
          })
        }
      })
    },
    handleSave () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let f = this.form
          Api.addSchool({
            id: f.id,
            schoolName: f.schoolName,
            address: f.address,
            transitInfo: f.transitInfo,
            metroInfo: f.metroInfo,
            parkInfo: f.parkInfo,
            longitude: f.longitude,
            latitude: f.latitude,
            status: f.status,
            orgUserId: f.orgUserId,
            listTrainVenuesAddress: f.listTrainVenuesAddress
          }, this).then((res) => {
            this.fetch()
            this.dVisible = false
          })
        } else {
          return false
        }
      })
    },
    handleAdd () {
      this.dVisible = true
      this.form = {
        id: '',
        schoolName: '',
        address: '',
        metroInfo: '',
        transitInfo: '',
        parkInfo: '',
        longitude: 0,
        latitude: 0,
        status: 1,
        orgUserId: '',
        createdTime: new Date().getTime(),
        listTrainVenuesAddress: [
          {
            id: '',
            schoolId: '',
            address: '',
            status: 1
          }
        ]
      }
    },
    // 添加上课地点
    handlePlusAddress () {
      this.form.listTrainVenuesAddress.push({
        id: '',
        schoolId: this.form.id || '',
        address: '',
        status: 1
      })
    },
    // 删除上课地点
    handleMinusAddress (i) {
      this.form.listTrainVenuesAddress[i].status = 0
    }
  }
}
</script>
<style lang="scss" scoped>
.campus-table{
  margin: 20px 0;
}
.center{
  text-align: center;
}
.no-data{
  padding-top: 50px;
  p{
    color: #333;
    margin: 20px 0 30px;
  }
}
.mb20{
  margin-bottom: 20px;
}
.add-input{
  width:305px;
}
.address-item{
  margin-bottom: 10px;
  text-align: left;
}
.address-input{
  width: 250px;
}
</style>
<style>
.form-wrapper{
  max-height: 500px;
  overflow-y: scroll;
}
</style>
